
import React, { Component } from 'react';
import {Link} from 'react-router-dom'
import{ LinkContainer} from '../../StyledHome'
import { withRouter } from 'react-router-dom'

import UIButton from 'components/UIButton/UIButton'
import qd from 'images/home/sy_qd_icon@3x.png'
import xsrw from 'images/home/sy_xsrw_icon@3x.png'
import rwfq from 'images/home/sy_rwfq_icon@3x.png'
import fbrw from 'images/home/sy_fbrw_icon@3x.png'
import { format } from 'path';





const btnArr = [
  {
    btnImg:qd,
    title:"签到",
    routePath:"/homeChildRouter/sign",
    tag:101
  },
  {
    btnImg:xsrw,
    title:"新手任务",
    routePath:"/homeChildRouter/newTask",
    tag:102
  },
  {
    btnImg:rwfq,
    title:"任务分区",
    routePath:"/index/hall",
    tag:103
  },
  {
    btnImg:fbrw,
    title:"发布任务",
    routePath:"/hallChildRouter/createTaskType",
    tag:104
  },
]
class LinkBtn extends Component {
  state = { 
    seleted: false,
   }
  render() { 
    // console.log(btnArr)
    return ( 
      <div style={{flexGrow:'0',flexShrink:'0'}}>
        {
          btnArr.map((value,index)=>(
        
            <UIButton key={index}

            // 组件内部传参,外部该参数为箭头函数
            // clickButton={this.onClickButton}

            // 调用时传参，传入箭头函数
            clickButton={()=>this.onClickButtons(value.tag)}
            imgPosition = 'top'
            imgMargin = '.25rem 0 .05rem'
            width = '25%'
            height = "1.05rem"
            tag ={value.tag}
            titleTextAlign = "center"
          
            titleHeigh = ".24rem"
            titleWidth = '100%'
            title={value.title}
            titleColor = "#646464"
            titleSize = "13px"
            imgWidth = '.45rem'
            imgHeight = '.45rem'
            img ={value.btnImg}
            ></UIButton> 
           
          ))
         
        }
      </div> 
    );
  }
  onClickLeft(tag){
    console.log(tag);
    
  }
  onClickRight(tag){
    console.log(tag);
    
  }

  onClickButtons(tag){
    console.log(tag)
    if(tag===104){
      this.props.history.push('/hallChildRouter/createTaskType')
    }else if(tag ===103){
      this.props.history.push('/index/hall/whole')
    }else if(tag ===102){
      this.props.history.push('/homeChildRouter/newTask')
    }else if(tag ===101){
      this.props.history.push('/homeChildRouter/sign')
    }
  }



  onClickButton = (tag)=>{ 
    console.log(tag,this.state.seleted); 
    this.setState({seleted:!this.state.seleted})
    // this.setState({},function回调)
    // 方法异步，虚拟dom机制
    // react 中父视图rander子视图一定进行，vue值改变才rander
   
  }
}
 
export default withRouter(LinkBtn);
